import React, { useState, useEffect, forwardRef } from 'react';
import { Cascader } from 'antd';
import request from '@/utils/request';

// const { Option } = Select;

/**
 * 部门编制、在职人数
 */
const DemandDepartmentNum = forwardRef((props, ref) => {
    const { value, onChange, options = [], departmentId } = props;
    // 部门编制
    const [twiceDepartment, setTwiceDepartment] = useState({ workNum: 0, planNum: 0 });
    // 是否显示提示
    const [mustShowTip, setMustShowTip] = useState(false);

    const handleChange = newValue => {
        onChange(newValue);
    };

    useEffect(() => {
        if (value) {
            if (value.length) {
                const fetchData = async () => {
                    const result = await request(
                        `/api/oa/v1/department/getdepartmentplannum/${value[value.length - 1]}`,
                        {
                            method: 'GET'
                        }
                    );
                    if (result.code === 10000) {
                        setTwiceDepartment(result.data);
                        setMustShowTip(true);
                    } else {
                        setMustShowTip(false);
                    }
                };
                fetchData();
            } else {
                setMustShowTip(false);
            }
        }
    }, [value, departmentId]);

    return (
        <React.Fragment>
            <Cascader options={options} value={value} {...props} onChange={handleChange} ref={ref} />
            {mustShowTip && (
                <div style={{ position: 'absolute', left: '0', height: '28px', lineHeight: '24px' }}>
                    部门在职人数/编制人数：
                    {twiceDepartment.workNum || 0}/{twiceDepartment.planNum || 0}
                </div>
            )}
        </React.Fragment>
    );
});

export default DemandDepartmentNum;
